<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/rejester.css">
</head>

<body>
    <div class="header">
        <div class="header_cen ">
            <div class="hl fl">
                <span class="og">亲,请登录</span>
                <a href="#"><span>免费注册</span></a>
                <a href="#"><span>手机逛淘宝</span></a>
            </div>
            <div class="hr fr">
                <a href=""><span>淘宝网首页</span></a>
                <a href=""><span>我的淘宝</span></a>
                <a href=""><span>购物车</span></a>
                <a href=""><span>收藏夹</span></a>
                <a href=""><span>商品分类</span></a>
                <a href=""><span>卖家中心</span></a>
                <a href=""><span>联系客服</span></a>
                <a href=""><span>网站导航</span></a>
            </div>
        </div>

        <div class="page">
            <div class="pageon">
                <div class="users">
                    <a><img src="./img/T1Kz0pXzJdXXXIdnjb-146-58.png" alt=""></a>
                    <h2>用户注册</h2>
                </div>
            </div>
        </div>


        <div class="ting">
            <div class="Sign">
                <div class="number">
                    <label class="label">帐号</label>
                    <div class="midd">
                        <div class="line">
                            <div class="inp">
                                <!-- <div class="select">
                                    <div class="code">
                                        <span class="name">
                                            中国大陆
                                        </span>
                                        <div class="arce">
                                            +86
                                            <div class="arrow"></div>
                                        </div>
                                    </div>
                                  
                                    <div class="list">
                                        <ul id="itemw" class="ggg">
                                            <li>中国大陆</li>
                                            <li>+86</li>
                                        </ul>
                                        <ul id="itemq" class="ggg">
                                            <li>中国香港</li>
                                            <li>+852</li>
                                        </ul>
                                        <ul id="itemq">
                                            <li>中国澳门</li>
                                            <li>+853</li>
                                        </ul>
                                        <ul id="itemq" class="ggg">
                                            <li>中国台湾</li>
                                            <li>+886</li>
                                        </ul>
                                        <ul id="itemq" class="ggg">
                                            <li>韩国</li>
                                            <li>+82</li>
                                        </ul>
                                        <ul id="itemq" class="ggg">
                                            <li>日本</li>
                                            <li>+81</li>
                                        </ul>
                                        <ul id="itemq" class="ggg">
                                            <li>美国</li>
                                            <li>+1</li>
                                        </ul>
                                    </div>

                                </div> -->
                            </div>
                            <div class="control">
                                <input placeholder="请输入你的账号" value="请输入你的账号" type="tel" id="username"onfocus="if (value =='请输入你的账号'){value =''}" onblur="if (value ==''){value='请输入你的账号'}">
                            </div>

                        </div>
                    </div>
                </div>

                <!-- 密码 -->
                <div class="number">
                    <label class="label">密码</label>
                    <div class="midd">
                        <div class="line">
                            <div class="contro">
                                <input type="text " placeholder="请输入密码" id="password" value="请输入密码"onfocus="if (value =='请输入密码'){value =''}" onblur="if (value ==''){value='请输入密码'}">
                            </div>
                            <!-- <div class="extra">
                                <a href="">获取验证码</a>
                            </div> -->
                        </div>
                    </div>
                </div>

                <!-- 登录 -->
                <a href="#" role="button" class="btnping">
                    <span id="btn2">注册</span>
                </a>

                <!-- 协议 -->
                <div class="agr">
                    <input type="checkbox" id="agring">
                    <label for="" class="agrment">
                        <div>
                            <p>
                                已阅读并同意一下协议
                                <a href="" target="_blank">淘宝平台服务协议</a>，
                                <a href="" target="_blank">隐私权政策</a>，
                                <a href="" target="_blank">法律声明</a>，
                                <a href="" target="_blank">支付宝及客户端服务协议</a>，
                            </p>
                        </div>
                    </label>
                </div>
            </div>
        </div>



        <div class="footer">
            <ul>
                <li><a href="#">阿里巴巴集团</a></li>
                <li><a href="#">阿里巴巴国际站</a></li>
                <li><a href="#">阿里巴巴中国站</a></li>
                <li><a href="#">全球速卖通</a></li>
                <li><a href="#">淘宝网</a></li>
                <li><a href="#">天猫</a></li>
                <li><a href="#">聚划算</a></li>
                <li><a href="#">一淘</a></li>
                <li><a href="#">阿里妈妈</a></li>
                <li><a href="#">飞猪</a></li>
                <li><a href="#">虾米</a></li>
                <li><a href="#">阿里云计算</a></li>
                <li><a href="#">云OS</a></li>
                <li><a href="#">万网</a></li>
                <li><a href="#">支付宝</a></li>

            </ul>
        </div>
        <div class="last">
            <ul>
                <li><a href="#">关于淘宝</a></li>
                <li><a href="#">合作伙伴</a></li>
                <li><a href="#">营销中心</a></li>
                <li><a href="#">联系客服</a></li>
                <li><a href="#">开放平台</a></li>
                <li><a href="#">诚征英才</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">网站地图</a></li>
                <li><a href="#">法律声明及隐私权政策</a></li>
                <span>© 2022-现在 Taobao.com 版权所有</span>
                <span>网络文化经营许可证<a href="">文网文[2010]040号</a></span>
                <span>增值电信业务经营许可证：浙B2-20080224-1</span>
                <span>信息网络传播视听节目许可证：1109364号</span>
            </ul>
        </div>
</body>
<script>
    var oarr = document.querySelector(".ting .Sign #btn2");
    console.log(oarr);
    var olist = document.querySelector(".list")
    console.log(olist);
    var aul = document.querySelectorAll(".list ul")
    var acode = document.querySelector(".code")
    const oun = document.querySelector("username")
    const opw = document.querySelector("password")
    const ob2 = document.querySelector("btn2");
    var flag = 0;//本来是显示得，标志为0
    // oarr.onclick = function (eve) {
    //     var e = eve || window.event;
    //     e.stopPropagation();
    //     if (flag === 0) {//执行这里
    //         olist.style.display = "block";//显示
    //         flag = 1;//标志为1
    //     } else {
    //         olist.style.display = "none";
    //         flag = 0;
    //     }
    // }
    // document.onclick = function () {
    //     olist.style.display = "none"
    //     flag = 0
    // }
    for (var i = 0; i < aul.length; i++) {
        aul[i].onmouseover = function () {
            this.className = "hover"
        }
        aul[i].onmouseout = function () {
            this.className = ""
        }
        aul[i].onclick = function () {
            acode.innerHTML = this.innerHTMLlist
        }
    }
    const obtnping = document.querySelector(".btnping");
    const oagr=document.querySelector("#agring")
    obtnping.onclick = function(){
        const ousername = document.querySelector("#username");
        const opassword = document.querySelector("#password");
        // console.log(ousername.value);
        // console.log(opassword.value);


        ajax2({
            type: "post",
            url: "http://localhost:3000/register",
            data:{
                username: ousername.value,
                password: opassword.value
            },
            success: res=>{
                console.log(JSON.parse(res));
                if(JSON.parse(res).code === 1){
                    location.href = "http://localhost:3000/login.html";
                }
            },
            error: code=>{
                console.log(code);
            }
        })
    }





    // ob2.onclick = function(){
    //     // 发起登录请求，携带数据
    //     ajaxPost({
    //         type:"post",
    //         url: "http://localhost:3000/register",
    //         data:{
    //             username: oun.value,
    //             password: opw.value
    //         },
    //         success:res=>{
    //             console.log(res);
    //         },
    //         error:code=>{
    //             console.log(code);
    //         }
    //     })
    // }

    // function ajaxPost(ops = {}){
    //     let {type="get", success, error, data={}, url} = ops;
    //     let str = "";
    //     for(let i in data){
    //         str += `${i}=${data[i]}&`;
    //     }
    //     // 2. post的数据不在url身上拼接
    //     // url += "?" + str.slice(0,-1);
    //     const xhr = new XMLHttpRequest();
    //     // 1. 注意open的第一个参数为post
    //     xhr.open(type, url, true);
    //     xhr.onreadystatechange = function(){
    //         console.log(xhr.status);
    //         if(xhr.readyState === 4 && xhr.status === 200){
    //             success(xhr.responseText);
    //         }else if(xhr.readyState === 4 && xhr.status !== 200){
    //             error && error(xhr.status);
    //         }
    //     }
    //     // 3. 修改请求头对象中的Content-type
    //     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    //     // 4. post的数据交给send的参数
    //     xhr.send(str.slice(0,-1));
    // }
    function ajax2(ops={}){
        let {type="get", success, error, url, data={}, timeout=100} = ops;
        let str = "";
        for(let i in data){
            str += `${i}=${data[i]}&`;
        }
        url = type==="get" ? url+"?"+str.slice(0,-1) : url;
        const xhr = new XMLHttpRequest();
        xhr.timeout = timeout;
        xhr.open(type, url, true);
        xhr.onload = function(){
            if(xhr.status === 200){
                if(success) success(xhr.responseText);
            }else{
                if(error) error(xhr.status);
            }
        }
        xhr.ontimeout = function(){
            if(error) error("timeout");
            xhr.abort();
        }
        if(type === "post"){
            xhr.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" );
            xhr.send( str.slice(0,-1) );
        }else{
            xhr.send();
        }
    }




</script>

</html>